<%--
  Created by IntelliJ IDEA.
  User: lkl
  Date: 2024/7/3
  Time: 22:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/123.png">
    <link rel="icon" type="image/png" href="assets/img/123.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>NEFU CCEC SE</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Source+Sans+Pro:400,600,700" rel="stylesheet">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <!-- Main CSS -->
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="Bootstrap/font/bootstrap-icons.css">
    <link rel="stylesheet" href="assets/css/main.css"/>
    <link rel="stylesheet" href="assets/css/app.css"/>
    <link rel="stylesheet" href="assets/css/theme.css"/>
    <style>
        /* 通用滚动条样式 */
        * {
            scrollbar-width: thin; /* 适用于Firefox */
            scrollbar-color: #4caf50 #f5f5f5; /* 滚动条滑块和背景色 */
        }

        /* Webkit浏览器（如Chrome、Safari）的滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px; /* 滚动条宽度 */
            height: 8px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #4caf50; /* 滚动条滑块颜色 */
            border-radius: 4px; /* 圆角 */
        }

        ::-webkit-scrollbar-track {
            background-color: #f5f5f5; /* 滚动条轨道颜色 */
        }
        .navbar-nav .highlight .nav-link
        {
            border-color:transparent;
            color: #495157!important;
        }
        /* 定义过渡效果 */
        a{
            transition: transform 0.3s ease;
            /* 可以添加其他基础样式，如颜色、边框等 */
        }

        /* 定义悬浮时的样式 */
        a:hover {
            transform: scale(1.2); /* 你可以根据需要调整这个值 */
        }
        .padd
        {
            padding: 0px 12px!important;
        }


        /* 为highlight类中的.nav-link添加悬浮时的背景颜色 */
        .navbar-nav .highlight .nav-link:hover {
            border-color:#245e98;
            background-color: #245e98; /* 悬浮时的背景颜色 */
            color: #0e5b3b; /* 悬浮时的文本颜色，如果有需要 */
        }
        /*.nav-item:hover{*/
        /*    !*text-decoration: underline;*!*/
        /*}*/
        .align-self-center
        {
            text-align: center;
        }

        .card {
            width: 200px!important; /* 或使用宽度百分比 */
            height: auto!important;
        }


        .footer{
            margin-top: 60px;
            height: 150px;
            background-color: #F5F5F5;
            text-align: center;
        }
        .service{
            padding: 30px 0px;
            height: 60px;
            border-bottom:1px solid #E8E8E8 ;
        }
        .copyright
        {
            padding:  0px 0px;
            height:30px;
            border-bottom:1px solid #E8E8E8 ;
        }
        .maker
        {
            padding: 0px 0px;
            height: 60px;
            border-bottom:1px solid #E8E8E8 ;
        }

        .mar{
            margin-top: 60px;
        }

        .tab-content {
            display: flex;
        }

        /*.tab-content{*/
        /*    margin: 0 5px; !* 左右外边距 *!*/
        /*    !* 其他样式 *!*/
        /*}*/

        /* 第一个和最后一个子元素不需要右边距 */
        .tab-content:first-child {
            margin-left: 0;
        }

        .tab-content:last-child {
            margin-right: 0;
        }
        /*.col-8{*/
        /*    .zhicheng{*/
        /*        margin-left: 290px;*/
        /*        margin-bottom: 20px;*/
        /*    }*/
        /*}*/
        .col-8 .zhicheng {
            margin-left: 290px;
            margin-bottom: 20px;
        }
        .align-self-left
        {
            text-align: left;
        }


        .text-container {
            max-height: 160px; /* 根据需要设置最大高度 */
            overflow-y: auto; /* 允许垂直滚动 */
            /*padding: 0px; !* 添加内边距，确保内容与滚动条之间有空间 *!*/
        }
        .text-container {
            position: relative;
            top: -10px; /* 向上移动10px */
        }

        .progress-bar{
            height: 3px; /* 进度条的高度 */
            background-color: #eee; /* 进度条的背景颜色 */
            position: relative; /* 确保进度条内的子元素可以相对定位 */
        }

        .progress {
            background-color: #4caf50; /* 进度条的填充颜色 */
            position: absolute;
            left: 0;
            top: 0;
            height: 100%; /* 占满整个进度条容器的高度 */
            width: 0; /* 初始宽度为0，根据滚动动态调整 */
            transition: width 0.3s ease; /* 平滑过渡效果 */
        }
        .video-container {
            position: relative; /* 相对定位或固定定位取决于你的需要 */
            width: 100%; /* 容器宽度设为100%以占据其父元素的宽度 */
            padding-top: 56.25%; /* 16:9的宽高比，这可以通过(9/16) * 100%计算得出 */
            height: 0; /* 设置为0，因为我们使用padding来定义高度 */
            overflow: hidden; /* 隐藏超出容器的部分 */
        }

        .video-container .video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%; /* 宽度设置为100%以填充容器 */
            height: 85%; /* 高度设置为100%以填充容器 */
            object-fit: cover; /* 保持宽高比的同时覆盖整个容器 */
        }

        .card-pin
        {
            margin: 20px 0px;
        }
        .all{
            width: 100%;
            margin-top:92px;
            margin-left: 3px;
        }

    </style>
</head>
<body>
<!--------------------------------------
NAVBAR
--------------------------------------->
<nav class="topnav navbar navbar-expand-lg navbar-light bg-white fixed-top">
    <div class="container">
        <a class="navbar-brand" href="index.html"><strong>NEFU CCEC SE</strong></a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarColor02" style="">
            <ul class="navbar-nav mr-auto d-flex align-items-center">
                <li class="nav-item">
                    <a class="nav-link" href="introduction">专业介绍</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="lab">实验室</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="teacher">教师队伍</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="job">就业指南</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="listNews">新闻</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="listNotice">公告</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto d-flex align-items-center">
                <li class="nav-item highlight">
                    <a class="nav-link" href="login">登录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<!-- End Navbar -->

<!--------------------------------------
HEADER
--------------------------------------->
<div class="container mar">
    <div class="jumbotron jumbotron-fluid mb-3 pt-0 pb-0 bg-lightblue position-relative"style="height: 437px">
        <div class="pl-4 pr-0 h-100 tofront padd">
            <div class="row justify-content-between">
                <!--                style="background-size: contain;background-image:url(./assets/img/tearcher/all.png);-->
                <div class="col-md-6 d-none d-md-block align-items-center"style="padding: 0px 0px;">
                    <img class="all" src="assets/img/tearcher/all.png" alt=""></div>
                <div class="col-md-6 pt-6 pb-6 align-self-center">
                    <h1 class="secondfont mb-3 font-weight-bold">
                        教师队伍
                    </h1>
                    <p class="mb-3 align-self-left" style="text-indent: 2em;">
                        教师队伍采用专兼结合的用人机制，现有专职教师12人，其中高级职称7人，讲师5人，博士8人，硕士4人，其中6人具有国外留学或访学经历，此外,专业还从国内外知名软件企业、高校聘请兼职教师承担部分教学工作作为补充。专业教师主持或参加了多项国家、省、部、市及学校的纵向、横向科研和教研项目。
                    </p>
                    <a href="index.html" class="btn btn-dark">Read More</a>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- End Header -->


<div class="container mar">
    <div class="row">
        <div class="col-4">
            <div class="list-group" id="list-tab" role="tablist">
                <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">教授</a>
                <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">副教授</a>
                <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">讲师</a>
            </div>
        </div>
        <div class="container col-8">
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                    <!--    教授-->
                    <h2 class="h4 font-weight-bold zhicheng">
                        <a class="text-dark" href="#">教授</a>
                    </h2>
                    <div class="card-columns">
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/lili.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">李莉</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        博士，教授，硕士生导师，东北林业大学青年成栋名师、软件工程专业主任、专业党支部书记。美国加州大学（河滨）访问学者。主持和参加国家级、省部级各类科研、教研项目15项，各级各类获奖10余项，作为第一作者发表SCI、EI、中文核心期刊等论文20余篇、主编教材4部。主持国家级一流本科课程、黑龙江省线上线下精品课程、东北林业大学一流本科课程、东北林业大学重点课程。获得第二届全国高校混合式教学设计创新大赛一等奖、华为产学合作专项奖；2次入选黑龙江省在线教学优秀案例；多次获得东北林业大学教学质量优秀奖、教学改革奖、教书育人先进个人称号。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/qiuzhaowen.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">邱兆文</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        博士，教授，博士生导师。博士毕业于哈工大，美国卡内基梅隆大学访问学者。东北林业大学三维数字化技术研究所所长。黑龙江省医学影像三维可视化与3D打印工程技术中心主任。拓盟科技董事长。中国计算机学会（CCF）理事，CCF杰出会员，CCF计算机应用专委常务委员，CCF哈尔滨执行委员，中国抗癌协会人工智能专委委员。主要研究方向为人工智能、混合现实。主持参加国家自然科学基金、科技部中央引导地方重大专项基金等18项。国家发明专利5项。主编专著1部。在Nature Machine Intelligence（IF=25.898）等期刊发表SCI论文20篇，H-index为6。获省科技进步三等奖 2项，获省高等教育教学成果二等奖2项。2016年获第五届“中国创新创业大赛”互联网及移动互联网行业企业组第三名 。2020年获第四届“中国创翼”创业创新大赛全国三等奖。2018年入选科技部创新人才推进计划，2019年入选国家万人计划领军人才。2019年获黑龙江省十大杰出创业青年。2022年获第八届“黑龙江省优秀科技工作者”。2020年挑战杯竞赛国赛金奖指导教师。2021年“互联网+”大赛国赛银奖指导教师。哈工大客座教授。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/zhaoyuming.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">赵玉茗</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        博士，教授，博士生导师。主要研究方向：生物信息学、数据挖掘。中国计算机学会生物信息专委会委员。主持国家自然科学基金面上项目、国家自然科学基金青年基金项目、国家重点研发项目子课题、黑龙江省自然科学基金、林木遗传育种国家重点实验室开放基金、中央高校基本科研业务费专项基金项目等多项科研项目；获得东北林业大学青年教师授课大赛二等奖；主讲精品在线课程1门；获得专利5项；发表学术论文30余篇，其中EI、SCI收录10余篇，参与编写教材1部。美国Indiana University-Purdue University Indianapolis访问学者，美国The Johns Hopkins University博士后访问学者。
                                        所在学科：林业工程（生物学）博导；计算机科学与技术（学硕及专业学位）硕导
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
                    <!--    副教授-->
                    <h2 class="h4 font-weight-bold zhicheng">
                        <a class="text-dark" href="#">副教授</a>
                    </h2>
                    <div class="card-columns">
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/wenxueyan.jpg" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">温雪岩</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        软件工程专业领域负责人，硕士，副教授，硕士生导师；黑龙江省计算机学会教育委员会委员。主要研究方向：算法与程序设计与开发、机器学习与深度学习、软件服务工程。主持或参加科研、教学项目10项，科研与教学获奖3项。出版教材5部，发表论文20余篇，EI1篇。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/luosiqing.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">罗嗣卿</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        硕士，副教授，硕士生导师。主要研究方向：信息系统析与设计、图像处理、软件服务与应用。主持和参加省攻关重点、省自然基金、国家林业公益性行业专项、省教改项目15项，发表论文20余篇，教材3部。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/guzhixin.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">谷志新</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        博士，副教授，硕士生导师。主持黑龙江省自然科学基金、哈尔滨市应用技术研究与开发项目、中央高校基本科研业务费专项基金项目5项；获得哈尔滨市科技进步三等奖，东北林业大学教学质量优秀奖；主要研究方向：人工智能、信息技术应用。发表科技论文20余篇，其中SCI、EI收录5篇，出版专著1部，主编教材2部。获得专利4项。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/liudan.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">刘丹</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        副教授，工学博士，硕士生导师。主要研究方向：无线传感器网络相关技术、数据仓库，数据挖掘。主持或参与科技部支撑计划项目、省自然科学基金项目、省科技攻关项目、哈尔滨科技局项目、中央高校基本可言业务C类项目等科研、教学项目20余项，出版教材7部，发表论文10余篇，其中EI收录论文7篇。获黑龙江省科技进步三等奖1项，省级奖励2项。授权发明专利、实用新型专利、软件著作权10余项。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/zhangxiying.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">张锡英</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        副教授，硕士，硕士生导师。主要研究方向：现代信息技术及网络应用，数据库技术、图像检索。主持或参加科研项目 11 项，发表论文 9 篇，出版教材 2 部。获得省级科学技术进步奖1次， 2 门课精品课主讲教师。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/bianjilong.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">边继龙</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        副教授，工学博士，硕士生导师，软件工程专业副主任，支部委员，毕业于哈尔滨工程大学计算机应用技术专业，美国印第安纳大学访问学者。主要研究方向：计算机视觉，深度学习，生物信息学等方面的研究。主持黑龙江省自然科学基金面上项目、中央高校基本科研经费项目3项科研项目。累计发表学术论文20余篇，其中被EI/SCI收录10余篇，发明及实用新型专利3项。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>

                    </div>
                    <hr>
                </div>
                <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
                    <!--    讲师-->
                    <h2 class="h4 font-weight-bold zhicheng">
                        <a class="text-dark" href="#">讲师</a>
                    </h2>
                    <div class="card-columns">
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/liyan.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">李琰</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        讲师，主要研究方向：软件工程，遥感和林业信息。参与科研项目多项，参编教材1部，并发表部分相关论文
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/wangbo.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">王波</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        讲师，硕士。主要研究方向:计算数学,软件开发,授课多年,有丰富的授课经验,精通Java,Web,发表学术论文3篇。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                        <div class="card card-pin">
                            <img class="card-img" src="assets/img/tearcher/shanying.png" alt="Card image">
                            <div class="overlay">
                                <h2 class="card-title title">单颖</h2>
                                <div class="text-container">
                                    <p class="card-title title">
                                        讲师，主要研究方向：软件工程，林业信息。授课多年，有丰富的授课经验，参与科研项目多项，并发表相关论文。
                                    </p>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                                <!--                                <div class="more">-->
                                <!--                                    <a href="post.html">-->
                                <!--                                        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> More </a>-->
                                <!--                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!--------------------------------------
FOOTER
--------------------------------------->

<div class="footer border-top">
    <div class="wrapper">
        <!--		服务-->
        <div class="service">
            服务于NEFU CCEC SE
        </div>
    </div>
    <!--		版权-->
    <div class="copyright">
        版权所有 2024 东北林业大学计算机与控制工程学院软件工程专业
    </div>
    <div class="maker">
        Copyright &copy; Li KunLong
    </div>
</div>
<!-- End Footer -->

<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
<script src="assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/vendor/app.js" type="text/javascript"></script>
<script src="assets/js/vendor/theme.js" type="text/javascript"></script>
<script src="assets/js/functions.js" type="text/javascript"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script>
    // 让滚动更平滑
    document.documentElement.style.scrollBehavior = 'smooth';
    // document.addEventListener('DOMContentLoaded', function() {
    //     const textContainer = document.getElementById('textToDisplay').parentNode;
    //     const progressBar = document.getElementById('progressBar');
    //
    //     textContainer.addEventListener('scroll', function() {
    //         const scrollHeight = textContainer.scrollHeight; // 内容总高度
    //         const scrollTop = textContainer.scrollTop; // 滚动的距离
    //         const clientHeight = textContainer.clientHeight; // 可见高度
    //
    //         const progress = (scrollTop / (scrollHeight - clientHeight)) * 100; // 计算进度百分比
    //         progressBar.style.width = progress + '%'; // 更新进度条宽度
    //     });
    // });
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有文本容器
        const textContainers = document.querySelectorAll('.text-container');

        // 通过类名获取进度条
        const progressBars = document.querySelectorAll('.progress');

        // 检查是否找到元素
        if (textContainers.length === 0 || progressBars.length === 0) {
            console.warn('未找到文本容器或进度条元素');
            return;
        }

        // 为每个文本容器添加滚动事件监听器
        textContainers.forEach(function(textContainer, index) {
            const progressBar = progressBars[index]; // 假设进度条和文本容器一一对应

            textContainer.addEventListener('scroll', function() {
                const scrollHeight = textContainer.scrollHeight;
                const scrollTop = textContainer.scrollTop;
                const clientHeight = textContainer.clientHeight;

                const progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
                progressBar.style.width = progress + '%'; // 更新进度条宽度
            });
        });
    });

    // document.addEventListener('DOMContentLoaded', function() {
    //     const textContainer = document.querySelector('.text-container');
    //     const card = document.querySelector('.card');
    //
    //     // 重置内容到初始状态的函数
    //     function resetContent() {
    //         textContainer.scrollTop = 0; // 将滚动位置重置为顶部
    //         // 如果有进度条，也可以在这里重置进度条
    //     }
    //
    //     // 监听鼠标悬浮事件
    //     card.addEventListener('mouseover', function() {
    //         resetContent();
    //     });
    // });
    document.addEventListener('DOMContentLoaded', function() {
        // 选择所有卡片的父容器，或者直接选择body
        const cards = document.querySelectorAll('.card');

        // 重置内容到初始状态的函数
        function resetContent(event) {
            // 获取事件触发的卡片元素
            const card = event.target.closest('.card');

            if (card) {
                // 找到卡片内的文本容器和进度条
                const textContainer = card.querySelector('.text-container');
                const progressBar = card.querySelector('.progress');

                // 重置滚动位置和进度条
                textContainer.scrollTop = 0;
                progressBar.style.width = '0%';
            }
        }

        // 为所有卡片添加单一的事件监听器
        cards.forEach(function(card) {
            card.addEventListener('mouseover', resetContent);
        });
    });

</script>
</body>
</html>
